<template>
  <div class="main">
      <!-- <div class="content-tabs"> -->
          <div class="btn" :class="{'active': index == 1}" @click="handleCar(1)">car1</div>
          <div class="btn" :class="{'active': index == 2}" @click="handleCar(2)">car2</div>
          <div class="btn" :class="{'active': index == 3}" @click="handleCar(3)">car3</div>
      <!-- </div> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            index: 1
        }
    },
    methods: {
        handleCar(val) {
            console.log(val)
            this.index = val
        }
    }

}
</script>

<style>
.main {
    margin: 50px 300px;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    /* justify-content: center; */
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 24px;
    border: 1px solid #f1f1f1;
    font-size: 12px;
    cursor: pointer;
}
.active {
    background-color: rgb(89, 134, 201);
    color: white;
}
.btn:nth-child(1) {
    border-radius: 5px 0 0 5px;
}
.btn:last-child {
    border-radius: 0 5px 5px 0;
}
</style>